<template>
    <chart :autoresize='true' :options='options'>
    </chart>
</template>

<script>

export default {
    data () {
        return {};
    },
    props: {
        data:{
            type:Array,
            default:[]
        }
    },
    computed: {
        options () {
            return {
                    backgroundColor: 'transparent',
                    textStyle: {
                        fontSize: 12,
                        fontFamily: 'PingFang',
                        fontWeight: 500,
                        color: '#ffffff'
                    },
                    'tooltip': {
                        'trigger': 'axis',
                        'axisPointer': {
                            'type': 'none',
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }

                        },

                        backgroundColor: 'rgba(0,123,255,0.5)'
                    },
                legend: {
                    selectedMode: false, //取消图例上的点击事件
                    top: 1,
                    textStyle: {
                        color: [],
                        fontSize: 14
                    },
                    icon: "circle",
                    itemWidth: 12,
                    itemHeight: 10,
                },
                    'grid': {
                        'borderWidth': 0,
                        'top': 40,
                        'bottom': 30,
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    'xAxis': [
                        {
                            'axisLine': {
                                lineStyle: {
                                    color: 'rgba(0,123,255,.5)',
                                    width: 2
                                }
                            },
                            'splitLine': {
                                'show': false
                            },
                            'axisTick': {
                                'show': false
                            },
                            'splitArea': {
                                'show': false
                            },
                            'axisLabel': {
                                color: 'rgba(255,255,255,0.7)',
                            },
                            boundaryGap:['0%','0%'],
                            data:this.data.map(item=>item.month)
                        }
                    ],
                    'yAxis': [
                        {
                            'type': 'value',
                            'splitLine': {
                                'show': false
                            },
                            minInterval:1,
                            'axisLine': {
                                'show': true,
                                lineStyle: {
                                    color: "rgba(0,123,255,.5)",
                                    width: 1
                                },
                            },
                            'axisTick': {
                                'show': false
                            },
                            'axisLabel': {
                                color: 'rgba(255,255,255,0.5)',
                                align: 'left',
                                inside: false,
                                margin:20

                            },
                            'splitArea': {
                                'show': false
                            }

                        },
                        {
                            'type': 'value',
							minInterval:1,
							'splitLine': {
                                'show': false
                            },
                            'axisLine': {
                                'show': true,
                                lineStyle: {
                                    color: "rgba(0,123,255,.5)",
                                    width: 1
                                },
                            },
                            'axisTick': {
                                'show': false
                            },
                            'axisLabel': {
                                'interval': 0,
                                color: 'rgba(255,255,255,0.5)',
                                align: 'left',
                                inside: false

                            },
                            'splitArea': {
                                'show': false
                            }

                        },
                    ],
                    'series': [
                        {
                            'name': '事故次数',
                            'type': 'line',
                            symbolSize: 8,
                            symbol: 'circle',
                            showSymbol: true,
                            yAxisIndex:0,
                            'itemStyle': {
                                'normal': {
                                    'color': '#0045CA',
                                    borderWidth: 1,
                                    borderColor: '#1372FF',
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 1,
                                    color: '#1372FF'
                                }
                            },
                            data:this.data.map(item=>item.Frequency)

                        },
                        {
                            'name': '死亡人数',
                            'type': 'line',
                            yAxisIndex:1,
                            symbolSize: 8,
                            symbol: 'circle',
                            'itemStyle': {
                                'normal': {
                                    'color': '#8D2121',
                                    borderWidth: 1,
                                    borderColor: '#EA4747',
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width: 1,
                                    color: '#EA4747'
                                }
                            },
                            data:this.data.map(item=>item.DeathToll)
                        },
                    ]
                }
        }
    }
};
</script>